<template>
  <div>
        <NavBar title="订单中心" />
        <Search/>
        <List type="order">
            <template slot="operate" slot-scope="{ row }">
                <van-button v-if="row.status == 1 && (user.uid == row.scheduleId)" type="primary" size="mini" @click.stop="approveTask(row, 'approve')">审批</van-button>
                <van-button v-else-if="row.status == 4 && (user.uid == row.scheduleId)" type="primary" size="mini" @click.stop="approveTask(row, 'finish')">审批</van-button>
            </template>
        </List>
        <van-dialog v-model="dialog.approve" title="指挥发来新的任务订单：" :show-confirm-button="false" :show-cancel-button="false">
          <div class="dialog-text">{{dialog.data.number}} {{dialog.data.name}}</div>
          <van-cell-group>
            <div class="dialog-item"><van-field v-model="dialog.form.area" :label="typeLabelMap[dialog.form.type]" placeholder="" /><span>{{typepriceMap[dialog.form.type]}}</span></div>
            <div class="dialog-item"><van-field v-model="dialog.form.price" label="计费单位：" placeholder="" /><span>积分/{{typepriceMap[dialog.form.type]}}</span></div>
            <div class="dialog-item"><van-field v-model="dialog.form.total" label="核算价格：" placeholder="" /><span>积分</span></div>
            <!-- <van-field v-model="dialog.form.price" label="计费单位：" placeholder="" /> -->
            <!-- <van-field v-model="dialog.form.total" label="核算价格：" placeholder="" /> -->
          </van-cell-group>
          <div class="dialog-btn">
            <van-button type="default" size="mini" @click.stop="dialog.approve = false">取 消</van-button>
            <van-button type="danger" size="mini" @click.stop="handleApprove(0)" style="margin: 0 1rem">拒 绝</van-button>
            <van-button type="primary" size="mini" @click.stop="handleApprove(1)">确 认</van-button>
          </div>
        </van-dialog>

        <van-dialog v-model="dialog.finish" title="您将结算任务订单：" show-cancel-button @confirm="handleFinish()">
          <div class="dialog-text">{{dialog.data.number}} {{dialog.data.name}}</div>
          <van-cell-group>
            <div class="dialog-item"><van-field v-model.number="dialog.form.area" :label="typeLabelMap[dialog.form.type]" placeholder="" /><span>{{typepriceMap[dialog.form.type]}}</span></div>
            <div class="dialog-item"><van-field v-model.number="dialog.form.price" label="计费单位：" placeholder="" /><span>积分/{{typepriceMap[dialog.form.type]}}</span></div>
            <div class="dialog-item"><van-field v-model.number="dialog.form.more" label="额外积分：" placeholder="" /><span>积分</span></div>
            <div class="dialog-item"><van-field v-model.number="dialog.form.total" label="核算价格：" placeholder="" /><span>积分</span></div>
          </van-cell-group>
        </van-dialog>
        <TabBar />
    </div>
</template>

<script>
import NavBar from "../../components/NavBar";
import TabBar from "../../components/TabBar";
import Search from "../../components/task/Search";
import List from "../../components/task/List";
import { TaskList, TaskHandle, ScheduleComplete } from "../../api/task";
import { Dialog, Toast } from 'vant'
export default {
  components: {
    NavBar,
    TabBar,
    Search,
    List,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      
      search: {
        name: undefined,

        status: undefined,
        status_name: undefined,

        time: undefined,
        time_name: undefined,
        type: 0,
      },
      pagination: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        loading: false,
        finished: false
      },
      list: [],
      user: {},
      dialog: {
        approve: false,
        finish: false,
        data: {},
        form: {
          id: undefined,
          accept: undefined,
          area: undefined,
          price: undefined,
          total: undefined,
          type: undefined,
          more: undefined
        }
      },

      typeLabelMap: {
          1: '巡检点数：',
          2: '巡检长度：',
          3: '巡检面积：'
      },
      typepriceMap: {
          1: '个',
          2: '公里',
          3: '平方公里'
      }
    };
  },
  watch: {
    "dialog.form.area": {
      handler(area){
        let { price,more } = this.dialog.form
        if(more){
          this.dialog.form.total = area * price +more;
        }else{
          this.dialog.form.total = area * price
        }
        
      },
      deep: true
    },
    "dialog.form.price": {
      handler(price){
        let { area,more } = this.dialog.form
       if(more){
          this.dialog.form.total = area * price +more;
        }else{
          this.dialog.form.total = area * price
        }
      },
      deep: true
    },
    "dialog.form.more":{
      
       handler(more){
         let { area ,price} = this.dialog.form
         
        
        if(more){
          this.dialog.form.total = area * price +more;
        }else{
          this.dialog.form.total = area * price
        }
      },
      deep: true
    }
  },
  methods: {
    async getList() {
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
      });
       console.log(this.search)
      let { search, pagination } = this,
          { data: { data, totalCount } } = await TaskList({ ...search, ...pagination }),
          { pageNo } = pagination
          console.log(data)
      if(pageNo === 1){
        this.list = data || [];
      }else{
        this.list = this.list.concat(data || [])
      }
      this.pagination.total = totalCount
      Toast.clear()
    },
    approveTask(item, type){
      console.log(item)
      this.dialog[type] = true
      let { form } = this.dialog
      Object.keys(form).forEach(key => {
        form[key] = item[key]
      })
      form.price = Number(item.total / item.area);
      this.dialog.form = form
    },
    async handleApprove(accept){
      let { form } = this.dialog
      form.accept = accept
      let { status } = await TaskHandle({ ...form })
      if(status === 1){
        Toast.success('操作成功')
        this.getList()
      }
      this.dialog.approve = false
    },
    async handleFinish(){
      let { form } = this.dialog
      form.accept = 1
      let { status } = await ScheduleComplete({ ...form })
      if(status === 1){
        Toast.success('操作成功')
        this.getList()
      }
      this.dialog.finish = false
    },
  },
  created() {
    this.getList();
    let u = localStorage.getItem('userInfo')
    this.user = u ? JSON.parse(u) : {}
  },
  provide() {
    return {
      Search: () => this.search,
      Pagination: () => this.pagination,
      GetList: this.getList,
      List: () => this.list,
    };
  },
};
</script>

<style lang="scss" scoped>
.dialog-text{
  padding:0.3rem 0; 
  font-size: .346667rem;
  text-align:center
}
.dialog-item{
  display: flex;
  align-items: center;
  > span{
    flex-shrink: 0;
    padding-right: .266667rem;
    font-size: .266667rem;
    color: #646566;
  }
}
.dialog-btn{
  text-align: center;
  padding: .4rem 0;
}
</style>